{% extends "base.html" %}

{% block title %}修改密码 - 设备管理系统{% endblock %}

{% block styles %}
<style>
    .password-container {
        max-width: 500px;
        margin: 50px auto;
        padding: 30px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .password-header {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .password-header h1 {
        color: var(--primary-color);
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #333;
        font-weight: 500;
    }
    
    .form-control {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.3s ease;
    }
    
    .form-control:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 2px rgba(52,152,219,0.1);
    }
    
    .btn-change-password {
        width: 100%;
        padding: 12px;
        background-color: var(--accent-color);
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-change-password:hover {
        background-color: #2980b9;
    }
</style>
{% endblock %}

{% block content %}
<div class="password-container">
    <div class="password-header">
        <h1><i class="fas fa-key"></i> 修改密码</h1>
        <p>请输入原密码和新密码</p>
    </div>
    
    <form method="POST" action="{{ url_for('change_password') }}">
        <div class="form-group">
            <label for="current_password"><i class="fas fa-lock"></i> 原密码</label>
            <input type="password" class="form-control" id="current_password" name="current_password" required 
                   placeholder="请输入原密码">
        </div>
        
        <div class="form-group">
            <label for="new_password"><i class="fas fa-key"></i> 新密码</label>
            <input type="password" class="form-control" id="new_password" name="new_password" required 
                   placeholder="请输入新密码">
        </div>
        
        <div class="form-group">
            <label for="confirm_password"><i class="fas fa-check-circle"></i> 确认新密码</label>
            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required 
                   placeholder="请再次输入新密码">
        </div>
        
        <button type="submit" class="btn-change-password">
            <i class="fas fa-save"></i> 修改密码
        </button>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 表单验证
    document.querySelector('form').addEventListener('submit', function(e) {
        const currentPassword = document.getElementById('current_password').value.trim();
        const newPassword = document.getElementById('new_password').value.trim();
        const confirmPassword = document.getElementById('confirm_password').value.trim();
        
        if (!currentPassword || !newPassword || !confirmPassword) {
            e.preventDefault();
            alert('请填写所有密码字段');
            return;
        }
        
        if (newPassword !== confirmPassword) {
            e.preventDefault();
            alert('新密码和确认密码不匹配');
            return;
        }
        
        if (newPassword.length < 6) {
            e.preventDefault();
            alert('新密码长度至少为6个字符');
            return;
        }
    });
</script>
{% endblock %} 